<template>
  <div class="type-container">
    <a-form :model="attrs.modelForm" :rules="attrs.rules" :ref="attrs.formRef">
      <a-form-item
        class="chiose-type"
        label="选择种类"
        required
        field="groupFlag"
        label-col-flex="0px"
      >
        <a-radio-group
          :disabled="!(attrs.viewMode === BaseDataUtils.viewMode.CREATE)"
          v-model="attrs.modelForm.groupFlag"
          @change="props.handleGroupChange"
        >
          <a-radio :value="false">单个病灶</a-radio>
          <a-radio :value="true">病灶群组</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item class="single-lesion-form" label="" label-col-flex="0px">
        <a-form-item class="signle-item" label="名称" field="name" label-col-flex="0px">
          <a-input
            placeholder="请输入"
            v-model.trim="attrs.modelForm.name"
            @change="(value, ev) => handleChange(value, attrs.modelForm.id)"
          ></a-input>
        </a-form-item>
        <a-form-item class="signle-item" label="编码" field="value" label-col-flex="0px">
          <a-input disabled v-model.trim="attrs.modelForm.value"></a-input>
        </a-form-item>
      </a-form-item>
      <div class="multiple-lesion-form" v-if="attrs.modelForm.groupFlag">
        <a-form-item
          class="child-item"
          v-for="(item, index) in attrs.modelForm.childs"
          :key="item.value"
          label=""
          label-col-flex="0px"
        >
          <div class="multiple-item-form">
            <a-form-item
              class="multiple-item"
              :label="`病灶${index + 1}`"
              :field="`childs.${index}.name`"
              label-col-flex="0px"
              :validate-trigger="['blur', 'change']"
              hide-asterisk
              :rules="[
                {
                  required: true,
                  message: `病灶${index + 1}名称不能为空！`,
                },
              ]"
            >
              <a-input
                placeholder="请输入"
                v-model.trim="item.name"
                @change="(value) => handleChildChange(value, index)"
              ></a-input>
            </a-form-item>
            <a-form-item
              class="multiple-item"
              label="编码"
              :field="`childs.${index}.value`"
              label-col-flex="0px"
            >
              <a-input disabled v-model.trim="item.value"></a-input>
            </a-form-item>
          </div>
          <div class="action-item">
            <i
              class="iconfont icon-tianjia"
              v-if="index === attrs.modelForm.childs.length - 1 || index === 0"
              @click.stop="() => props.handleTypeAdd(index + 1)"
            ></i>
            <i
              class="iconfont icon-shanchu1"
              v-if="attrs.modelForm.childs.length > 1 && index !== 0"
              @click.stop="() => props.handleTypeDel(index)"
            ></i>
          </div>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts" setup name="TypeModal">
import { useAttrs, ref, onMounted, type Ref } from "vue";
import * as Api from '@/api/configCenter/configCenter';
import type { FieldRule, ButtonProps } from "@arco-design/web-vue";
import * as ApiType from "@/api/configCenter/configCenter.d";
import * as BaseDataUtils from "@/views/configCenter/utils/useBaseData";
interface Prop {
  handleTypeAdd: Function;
  handleTypeDel: Function;
  handleGroupChange: Function;
}
const attrs = useAttrs() as {
  modelForm: {
    id: number;
    name: string;
    value: string;
    groupFlag: boolean;
    childs: any[];
    ifNameValidated: boolean;
    ifChildValidated: boolean;
  };
  viewMode: string;
  rules: Record<string, FieldRule<any> | FieldRule<any>[]> | undefined;
  formRef: Ref<any>;
  okButtonProps: ButtonProps;
};
const props = defineProps<Prop>();
const list = ref<ApiType.GetLesionResponseItem[]>([]);
const getList = async () => {
  const params = {
    page: 1,
    pageSize: 100000
  }
  const res = await Api.searchLesionData(params);
  if (res.code === 200 && res.data.list.length !== 0) {
    list.value = res.data.list;
  }
}
const handleChange = (value: string, id: number) => {
  if (list.value.some(item => item.name === value && item.id !== id)) {
    attrs.formRef.value.setFields({
      name: {
        status: "error",
        message: "病灶名称已存在",
      },
    })
    attrs.modelForm.ifNameValidated = true
  } else {
    attrs.formRef.value.setFields({
      name: {
        status: "info",
        message: "",
      },
    })
    attrs.modelForm.ifNameValidated = false
  }
  attrs.okButtonProps.disabled = attrs.modelForm.ifNameValidated || attrs.modelForm.ifChildValidated;
}
const handleChildChange = (value: string | undefined, index: number) => {
  if (attrs.modelForm.childs.some((item, i) => item.name === value && i !== index)) {
    attrs.formRef.value.setFields({
      [`childs.${index}.name`]: {
        status: "error",
        message: `病灶${index + 1}名称已存在`,
      }
    })
    attrs.modelForm.ifChildValidated = true
  } else {
    attrs.formRef.value.setFields({
      [`childs.${index}.name`]: {
        status: "info",
        message: "",
      }
    })
    attrs.modelForm.ifChildValidated = false
  }
  attrs.okButtonProps.disabled = attrs.modelForm.ifNameValidated || attrs.modelForm.ifChildValidated;
}
onMounted(() => (getList()))
</script>
<style lang="less" scoped>
@import url("../styles/typeModal.less");
</style>
